<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>懂车帝-看车选车买车就上懂车帝</title>
    <link rel="stylesheet" href="./base.css">
    <style>
        .warp {
            height: 568px;
            background: url(./img/download背景2.png) center no-repeat;
            background-size: 100% 100%;
            padding: 1.29333rem 0 0;
        }

        .warp .text li {
            float: left;
        }

        .warp .text li span {
            padding: 0 5px;
        }

        .warp .text {
            font-size: .82rem;
            font-weight: 500;
            position: absolute;
            right: 3.103333rem;
            top: .53333rem;
        }

        .warp .bgc {
            position: relative;
            width: 255px;
            height: 256px;
            background: url('./img/download背景.png');
            background-size: contain;
            position: relative;
            animation-name: fadeIn;
            margin-top: 100px;
            margin-left: 400px;
        }

        .bgc div:first-child {
            width: 78px;
            height: 102px;
            background: url(./img/download图标.png);
            background-size: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -39px;
            margin-top: -56px;
        }

        .bgc div:nth-child(2) {
            background: url(./img/download眼睛.png) no-repeat;
            width: 40px;
            height: 40px;
            top: 50px;
            left: 40px;
            position: absolute;
            background-size: cover;

        }

        .bgc div:nth-child(3) {
            background: url(./img/download搜索.png) no-repeat;
            position: absolute;
            background-size: cover;
            width: 30px;
            height: 30px;
            top: 130px;
            left: 20px;

        }

        .bgc div:nth-child(4) {
            background: url(./img/download信息.png) no-repeat;
            width: 40px;
            height: 40px;
            top: 190px;
            left: 60px;
            position: absolute;
            background-size: cover;

        }

        .bgc div:nth-child(5) {
            background: url(./img/download文本.png) no-repeat;
            width: 40px;
            height: 40px;
            top: 150px;
            right: 30px;
            position: absolute;
            background-size: cover;
        }

        .bgc div:nth-child(6) {
            background: url(./img/download钱.png) no-repeat;
            width: 40px;
            height: 40px;
            top: 30px;
            right: 40px;
            position: absolute;
            background-size: cover;

        }

        .download {
            position: absolute;
            right: 400px;
            top: 200px;
            width: 140px;
            height: 145px;
        }

        .download .xuan {
            width: 140px;
            height: 30px;
           margin-left: 10px;
        }

        .download .xuan li {
            float: left;
            margin: auto;
            font-size: 15px;
        }
        .download .xuan li span{
            padding:0 5px;
        }

        .download .dcd {
            width: 140px;
            margin-top: .33333rem;
            height:32px;
            margin-bottom: 20px;
            margin-left: 10px;
        }
        .download .dcd h2{
            font-size: 24px;
        }
        .download .downapp a{
            display: inline-block;
            text-align: center;
            width: 140px;
            height: 35px;
            line-height: 35px;
            color: #ffffff;
            background-color: black;
            border-radius: 20px;
        }
        .app {
            height: 600px;
            background-color: #FFE100;
        }
        .app .ewm{
            width: 200px;
            height: 230px;
            margin: auto;
        }
        .app .ewm p{
            margin-top: 10px;
            margin-left: 10px;
            font-size: 20px;
            font-weight: 600;
            color: black;
        }
        .app .foot{
            margin-top: 200px;
            height: 100px;
            text-align: center;
        }
        .app .foot p{
            font-size: 16px;
            color: #000;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="warp">
        <div class="text">
            <ul>
                <li><a href="#">官方微博</a></li>
                <li><span>|</span></li>
                <li><a href="#">公众号</a></li>
            </ul>
        </div>
        <div class="bgc">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="download">
            <ul class="xuan">
                <li>看车</li>
                <li><span>|</span></li>
                <li>选车</li>
                <li><span>|</span> </li> 
                <li>买车</li>
            </ul>
            <div class="dcd">
                <h2>就上懂车帝</h2>
            </div>
            <div class="downapp">
                <a href="#">立即下载</a>
            </div>
        </div>
    </div>
    <div class="app">
        <div class="ewm">
            <img src="./img/download下载.png" alt="">
            <p>扫码下载懂车帝APP</p>
        </div>
        <div class="foot">
            <p>京公网安备 11010802026035号 | 广播电视节目制作经营许可证 | 营业执照 | 京ICP备17027026号-2 | 增值业务经营许可证（京B2-20180202)</p>
            <p>中央网信办违法和不良信息举报中心|违法和不良信息举报电话: 010-58341833 懂车帝用户协议|懂车帝隐私协议 | 懂车帝官网</p>
            <p>&copy 2019 懂车帝 www.dcdapp.com 公司名称：北京空间变化科技有限公司</p>
        </div>
    </div>
    
</body>

</html>